<template>
  <div class="index-container">
    <Header title="每日健康申报">
      <van-notice-bar class="font-20">
        您好！请从12月9日至返程当天填报每日健康申报。
      </van-notice-bar>
    </Header>

    <div class="warpper">
      <van-form @submit="onSubmit">
        <van-field v-model="selfUserInfo.id" label="主键" placeholder="主键" readonly v-show="false"/>
        <van-field
          v-model="selfUserInfo.id"
          name="user_id"
          label="用户主键"
          placeholder="用户主键"
          readonly
          v-show="false"
        />
        <van-field v-model="selfUserInfo.fakexm" label="姓名" placeholder="姓名" readonly disabled/>
        <van-field label="性别" readonly disabled>
          <template #input>
            <van-radio-group v-model="selfUserInfo.xb" direction="horizontal" disabled>
              <van-radio name="male">男</van-radio>
              <van-radio name="female">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="selfUserInfo.fakeidcard"
          label="证件号码"
          placeholder="证件号码"
          readonly
          disabled
        />
        <van-field
          v-model="selfUserInfo.faketel"
          label="手机号码"
          placeholder="手机号码"
          readonly
          disabled
        />
        <van-tabs v-model="tabActive" class="van-tabs-style" @click="tabChange">
          <van-tab title="健康申报">
            <van-field v-model="selfUserInfo.sbrq" name="sbrq" label="申报日期" placeholder="申报日期" readonly disabled/>
            <p class="health vaild">是否有以下情况</p>
            <van-field name="jkzk" :rules="[{ required: true, message: '请选择个人健康情况' }]">
              <template #input>
                <van-checkbox-group v-model="selfUserInfo.jkzk" @change="checkChange">
                  <van-checkbox :name="100" shape>14天内曾居住或前往疫情高发地</van-checkbox>

                  <!--              <van-checkbox :name="3" shape>最近一个月是否有国外/境外旅居史</van-checkbox>-->
                  <van-checkbox :name="99" shape>没有出现症状</van-checkbox>
                  <van-checkbox :name="2" shape :disabled="checkDisabled" shape>两周内有与确诊患者接触</van-checkbox>
                  <van-checkbox :name="3" :disabled="checkDisabled" shape
                  >感冒样症状：乏力、精神差、咳嗽、发烧、肌肉疼、头疼
                  </van-checkbox
                  >
                  <van-checkbox :name="4" :disabled="checkDisabled" shape>喘憋、呼吸急促</van-checkbox>
                  <van-checkbox :name="5" :disabled="checkDisabled" shape>恶心呕吐、腹泻</van-checkbox>
                  <van-checkbox :name="6" :disabled="checkDisabled" shape>心慌、胸闷</van-checkbox>
                  <van-checkbox :name="7" :disabled="checkDisabled" shape
                  >结膜炎（红眼病样表现：眼睛涩、红、分泌物）
                  </van-checkbox
                  >
                </van-checkbox-group>
              </template>
            </van-field>
            <van-field type="textarea"
                       rows="1"
                       autosize v-model="selfUserInfo.bz" name="bz" label="备注" placeholder="备注"/>
            <van-field name="agree" :rules="[{ required: true, message: '请勾选' }]">
              <template #input>
                <van-checkbox v-model="selfUserInfo.agree" shape>
                  本人承诺如实填写每日健康申报信息，如因隐瞒病情及接触史，引起影响公共安全的后果，本人将承担相应的法律责任
                </van-checkbox>
              </template>
            </van-field>

            <div class="mar-16" v-if="showAdd">
              <van-button round block type="info" native-type="submit" v-if="showSubmit==1">提交</van-button>
              <van-button round block native-type="button" color="#999999" disabled v-else-if="showSubmit==2">提交
              </van-button>
              <van-button round block native-type="button" color="#999999" disabled v-else>已提交</van-button>
            </div>
          </van-tab>
          <van-tab title="近14天旅居史申报">

            <div class="sohourn-history">
              <div class="sohourn-history-list">
                <van-cell v-for="(item,index) in sohournList" :key="index">
                  <template #title>
                    <div class="lable-item">
                      <p>行程地点：{{ item.ljdmc }}</p>
                    </div>
                  </template>
                  <!--                  <template #label>-->
                  <!--                    <div class="lable-item">-->
                  <!--                      <p>行程时间：{{ item.sbrq }}</p>-->
                  <!--                    </div>-->
                  <!--                    <div class="func-btn">-->
                  <!--                      <van-button round type="danger" size="small" class="btn" native-type="button"-->
                  <!--                                  @click.stop='sohournSubmit(item,"delete")'>删除-->
                  <!--                      </van-button>-->
                  <!--                      <van-button round type="info" size="small" class="btn" native-type="button"-->
                  <!--                                  @click.stop="updateSohourn(item)">-->
                  <!--                        修改-->
                  <!--                      </van-button>-->
                  <!--                    </div>-->
                  <!--                  </template>-->
                </van-cell>
              </div>
              <!--              -->
              <div class="layout-footer" v-show="showAdd">
                <van-button block type="danger" native-type="button" @click.stop="showPopup=true">新增</van-button>
              </div>
            </div>

          </van-tab>
        </van-tabs>

      </van-form>
      <van-popup closeable v-model="showPopup" class="popup">
        <van-form @submit="sohournSubmit">
          <van-field v-model="selfUserInfo.id" name="user_id" readonly v-show="false"/>
          <van-field v-model="selfUserInfo.id" name="aae011" readonly v-show="false"/>
          <van-field v-model="selfUserInfo.xm" name="aae019" readonly v-show="false"/>
          <!--          <van-field v-model="selfUserInfo.sbrq" name="aae036" readonly v-show="false"/>-->
          <van-field v-model="sohourn.ljddm" name="ljddm" readonly v-show="false"/>
          <van-field v-model="sohourn.id" name="id" readonly v-show="false"/>
          <van-field v-model="sohourn.aae100" name="aae100" readonly v-show="false"/>
          <!--          <van-field-->
          <!--            readonly-->
          <!--            clickable-->
          <!--            name="sbrq"-->
          <!--            label="行程时间"-->
          <!--            v-model="sohourn.sbrq"-->
          <!--            placeholder="点击选择行程时间"-->
          <!--            label-class="vaild"-->
          <!--            :rules="[{ required: true }]"-->
          <!--            @click="showCalendar = true"-->
          <!--          />-->
          <van-field style="margin-top: 30px"
                     name="ljdmc"
                     v-model="sohourn.ljdmc"
                     is-link
                     readonly
                     label="行程城市"
                     placeholder="点击选择行程城市"
                     label-class="vaild"
                     @click="cityShow=true"
                     :rules="[{ required: true }]"
                     type="textarea"
                     rows="1"
                     autosize
          />
          <div class="text-center">
            <van-button class="btn" type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-popup>
      <!-- 日历组件-->
      <van-calendar v-model="showCalendar" :min-date="minDate" :max-date="maxDate"
                    @confirm="arriveCalenderConfirm"/>
      <city-popup v-if="cityShow" @cityChange="cityChange" @cityClose="cityShow=false"></city-popup>
    </div>
  </div>
</template>

<script>
import { saveHealthInfo, getDoctorHealthyList, getDoctorSohournHistory, saveDoctorSohournHistory } from 'api/health'
import { getSelfInfo } from '@/utils/tokenUtil'
import { parseTime } from '@/utils/'
import CityPopup from '@/components/CityPopup'

let getdate = 0
export default {
  name: 'IllnessReport',
  components: {
    CityPopup
  },
  data() {
    return {
      selfUserInfo: {},
      checkDisabled: false,
      showSubmit: 1,
      tabActive: 0,
      sohournList: [],
      sohourn: {
        ljddm: '',
        ljdmc: '',
        sbrq: '',
        aae100: 1
      },
      showPopup: false,
      showCalendar: false,
      cityShow: false,
      minDate: new Date(2021, 11, 1),
      maxDate: new Date(2021, 11, 31),
      showAdd: false
    }
  },
  created() {
    this.loadUserInfoFromCenter()
    this.timeDowm()
  },
  methods: {
    timeDowm() {
      const endTime = parseTime(new Date(), '{d}')
      if (parseInt(endTime) < 9) {
        this.showAdd = false
      } else {
        this.showAdd = true
      }
    },
    tabChange(item) {
      if (item == 1) {
        this.getSohournList()
      }
    },
    loadUserInfoFromCenter() {
      let selfInfo = getSelfInfo()
      let date = new Date()
      let sbrq = selfInfo.sbrq = parseTime(date, '{y}-{m}-{d}')
      this.selfUserInfo = selfInfo
      this.getHealthyList(sbrq, true)
    },
    onSubmit(data) {
      this.showSubmit = 2

      this.$dialog
        .confirm({
          message: '点击确认视同承诺信息真实有效，如有虚报瞒报信息需承担相应法律责任'
        })
        .then(() => {
          data.jkzk = JSON.stringify(data.jkzk)
          data.agree = data.agree ? 1 : 0
          saveHealthInfo(data)
            .then(res => {
              this.showSubmit = 3
              this.$dialog.alert({
                message: '提交成功'
              })
            }).catch(() => {
            this.showSubmit = 1
          })
        }).catch(() => {
        this.showSubmit = 1
      })
    },
    checkChange(name) {
      if (name.indexOf(99) != -1) {
        this.checkDisabled = true
        if (
          name.indexOf(2) != -1 ||
          name.indexOf(3) != -1 ||
          name.indexOf(4) != -1 ||
          name.indexOf(5) != -1 ||
          name.indexOf(6) != -1 || name.indexOf(7) != -1
        ) {
          name = name.filter(item => item >= 99)
          this.selfUserInfo.jkzk = name
        }
      } else {
        this.checkDisabled = false
      }
    },
    getHealthyList(sbrq, today) {
      getDoctorHealthyList({ 'user_id': this.selfUserInfo.id, sbrq }).then(res => {
        let data = JSON.parse(res.data)
        if (data.length > 0) {
          let illnessReport = data[0]
          this.$set(this.selfUserInfo, 'jkzk', JSON.parse(illnessReport.jkzk))
          if (today) {
            this.showSubmit = 3
            this.$set(this.selfUserInfo, 'agree', illnessReport.agree == '1' ? true : false)
          } else {
            this.showSubmit = 1
          }
        } else {
          this.showSubmit = 1
          if (getdate == 0) {
            let date = new Date()
            date.setTime(date.getTime() - 24 * 60 * 60 * 1000)
            let getSbrq = parseTime(date, '{y}-{m}-{d}')
            this.getHealthyList(getSbrq, false)
            getdate++
          }
        }
      })
    },
    arriveCalenderConfirm(date) {
      this.sohourn.sbrq = parseTime(date, '{y}-{m}-{d}')
      this.showCalendar = false
    },
    cityChange({ regionKey, regionName }) {
      this.sohourn.ljddm = regionKey
      this.sohourn.ljdmc = regionName
      this.cityShow = false
    },
    getSohournList() {
      getDoctorSohournHistory({ 'user_id': this.selfUserInfo.id }).then(res => {
        let data = JSON.parse(res.data)
        this.sohournList = data
      })
    },
    updateSohourn(item) {
      this.sohourn = { ...item }
      this.showPopup = true
    },
    sohournSubmit(data, handler) {
      if (handler == 'delete') {
        data.aae100 = 0
      }
      let filterList = this.sohournList.filter(item => item.ljddm === data.ljddm)
      if (filterList.length > 0) {
        this.$dialog.alert({
          message: '不能重复申报行程地点'
        })
        return
      }
      this.$dialog.confirm({
        message: `您确认申报“${data.ljdmc}”吗，确定后将无法修改！`
      }).then(() => {
        saveDoctorSohournHistory(data).then(res => {
          this.getSohournList()
          this.$dialog.alert({
            message: '提交成功'
          })
          this.showPopup = false
          this.sohourn = {
            ljddm: '',
            ljdmc: '',
            sbrq: '',
            aae100: 1
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.health {
  font-size: 0.6rem;
  font-weight: bold;
  background: white;
  margin: 0;
  padding: 20px 10px 10px;
}

/deep/ .van-checkbox {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 10px;
  }
}

.sohourn-history {
  &-list {
    margin-bottom: 50px;
    padding-top: 20px;
    background-color: white;
  }
}

.popup {
  width: 90%;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 20px 0;

  .btn {
    width: 80%;
    margin: 20px 10px 0;
    height: 1rem;
    line-height: 1;
  }
}

</style>
